<!DOCTYPE html>
<html>
<head>
	<title>Upload Files using XMLHttpRequest - Minimal</title>

	<script type="text/javascript">
	  function fileSelected() {
		var file = document.getElementById('fileToUpload').files[0];
		if (file) {
		  var fileSize = 0;
		  if (file.size > 1024 * 1024)
			fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
		  else
			fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

		  document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
		  document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
		  document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
		}
	  }

	  function uploadFile() {
		var fd = new FormData();
	   
		var inputFile = document.getElementById('fileToUpload');
		for(var i=0; i<inputFile.files.length; i++)
		{
			console.info(inputFile.files[i]);
			 fd.append("file[]", inputFile.files[i]);
		}

		var xhr = new XMLHttpRequest();
		xhr.upload.addEventListener("progress", uploadProgress, false);
		xhr.addEventListener("load", uploadComplete, false);
		xhr.addEventListener("error", uploadFailed, false);
		xhr.addEventListener("abort", uploadCanceled, false);
		xhr.open("POST", "/scrupload/sample/upload.php");
		xhr.send(fd);
	  }

	  function uploadProgress(evt) {
		if (evt.lengthComputable) {
		  var percentComplete = Math.round(evt.loaded * 100 / evt.total);
		  document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
		}
		else {
		  document.getElementById('progressNumber').innerHTML = 'unable to compute';
		}
	  }

	  function uploadComplete(evt) {
		/* This event is raised when the server send back a response */
		alert(evt.target.responseText);
	  }

	  function uploadFailed(evt) {
		alert("There was an error attempting to upload the file.");
	  }

	  function uploadCanceled(evt) {
		alert("The upload has been canceled by the user or the browser dropped the connection.");
	  }
	</script>
</head>
<body>
  <form id="form1" enctype="multipart/form-data" method="post" action="/scrupload/sample/upload.php">
	<div class="row">
	  <label for="fileToUpload">Select a File to Upload</label><br />
	  <input type="file" name="fileToUpload" id="fileToUpload" multiple onchange="fileSelected();"/>
	</div>
	<div id="fileName"></div>
	<div id="fileSize"></div>
	<div id="fileType"></div>
	<div class="row">
	  <input type="button" onclick="uploadFile()" value="Upload" />
	</div>
	<div id="progressNumber"></div>
  </form>
</body>
</html>